<template>
  <div class="container" style="min-width: 1004px">
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home/project/alertProjectList' }">预警列表</el-breadcrumb-item>
      <el-breadcrumb-item v-if="this.$route.query.doEvent==='已处理'">预警详情</el-breadcrumb-item>
      <el-breadcrumb-item v-else>处理预警</el-breadcrumb-item>
    </el-breadcrumb> -->
    <!-- <el-row class="tipBar"> -->
    <!-- <el-col class="tip" :span="16">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
        {{this.$route.query.doEvent==='已处理'?"预警详情":"处理预警"}}
      </el-col> -->
    <topTitle
      :titleText="
        this.$route.query.doEvent === '已处理' ? '预警详情' : '处理预警'
      "
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div
      class="tipButton"
      v-if="
        this.$route.query.doEvent != '已处理' &&
        this.$route.query.isShow === 'yes'
      "
    >
      <!--<el-col :span="8" class="tipButton" v-if="showHandle">-->
      <div>
        <el-button
          round
          type="primary"
          @click="goAddAlertAble()"
          class="save"
          v-show="
            this.$store.state.buttonLimitsArr.indexOf('ncAlertList:update') > -1
          "
        >
          添加处罚
        </el-button>
        <el-button
          type="primary"
          round
          @click="goEliminateAlertAble()"
          class="save"
          v-show="
            this.$store.state.buttonLimitsArr.indexOf('ncAlertList:delete') > -1
          "
        >
          消除预警
        </el-button>
      </div>
    </div>
    <!-- </el-row> -->
    <!--<topTitle :titleText="titleText"></topTitle>-->
    <el-row
      style="background-color: #fff; padding-bottom: 15px; margin: 0 24px"
      class="mainCon"
    >
      <el-row class="tipBar2">
        <el-col class="hint">
          <div class="imgLabel">
            <img
              src="../../../static/img/salary/editSalary.png"
              class="picCss"
            />
          </div>
          <div class="hintCss">
            <div>1.处理预警</div>
            <span class="fontCss"
              >根据预警原因以及相应处理办法处理预警，从根源解决预警</span
            >
          </div>
        </el-col>
        <el-col class="stepCss">
          <img src="../../../static/img/salary/stepLine.png" class="lineCss" />
        </el-col>
        <el-col class="hint">
          <div class="imgLabel">
            <img
              src="../../../static/img/alert/backHandle.png"
              class="picCss"
            />
          </div>
          <div class="hintCss">
            <div>2.添加处理回执上传附件</div>
            <span class="fontCss"
              >请填写处理回执并上传处理凭证,填写完成后点击提交</span
            >
          </div>
        </el-col>
        <el-col class="stepCss">
          <img src="../../../static/img/salary/stepLine.png" class="lineCss" />
        </el-col>
        <el-col class="hint">
          <div class="imgLabel">
            <img
              src="../../../static/img/alert/waitResult.png"
              class="picCss"
            />
          </div>
          <div class="hintCss">
            <div>3.等待预警处理结果</div>
            <span class="fontCss"
              >系统将根据预警产生原因判读和监察处理结果自动判断完成情况</span
            >
          </div>
        </el-col>
      </el-row>
      <!--预警内容-->
      <el-row>
        <!--左-->
        <el-col class="intervalCss" :span="15">
          <el-row class="tip2">
            <div
              style="
                font-size: 48px;
                width: 48px;
                height: 48px;
                display: inline-block;
              "
              :span="5"
              :class="
                this.$route.query.doEvent === '未处理'
                  ? 'el-icon-warning-outline picCss2'
                  : this.$route.query.doEvent === '处理中'
                  ? 'el-icon-time picCss3'
                  : 'el-icon-circle-check picCss4'
              "
            ></div>
            <div :span="20" style="margin-left: 15px; display: inline-block">
              <el-row class="fontCss2">
                <el-col style="text-align: left"
                  >当前状态：
                  <span
                    :class="
                      this.$route.query.doEvent === '未处理'
                        ? 'picCss2'
                        : this.$route.query.doEvent === '处理中'
                        ? 'picCss3'
                        : 'picCss4'
                    "
                    >{{ this.$route.query.doEvent }}</span
                  >
                </el-col>
                <!--<el-col :span="16" :class="this.$route.query.doEvent==='未处理'?'picCss2':(this.$route.query.doEvent==='处理中'?'picCss3':'picCss4')">{{this.$route.query.doEvent}}</el-col>-->
              </el-row>
              <el-row class="fontCss verticalCss2"
                >最近处理时间：
                <template v-if="alertHandleDetail[0]">
                  {{
                    alertHandleDetail[0].recentDate != null
                      ? alertHandleDetail[0].recentDate.substr(0, 4) +
                        '年' +
                        alertHandleDetail[0].recentDate.substr(5, 2) +
                        '月' +
                        alertHandleDetail[0].recentDate.substr(8, 2) +
                        '日 ' +
                        alertHandleDetail[0].recentDate.substr(11, 8)
                      : '--'
                  }}
                </template>
              </el-row>
            </div>
          </el-row>
          <!--添加处理记录-->
          <el-row
            v-if="
              this.$route.query.doEvent != '已处理' &&
              this.$route.query.isShow === 'no'
            "
          >
            <el-row>
              <el-col>
                <span class="labelCss2">处理回执：</span>
                <div class="inforCss" style="margin-left: 85px">
                  <textarea
                    v-model="receipt"
                    style="height: 160px; width: 100%"
                    placeholder="请详细填写处理回执，告知监察预警处理情况，以免产生处罚。不超过100字。"
                  ></textarea>
                </div>
              </el-col>
              <el-col :span="21"></el-col>
            </el-row>
            <el-row>
              <el-col>
                <span class="labelCss2">上传照片：</span>
                <div class="inforCss" style="margin-left: 85px">
                  <el-row class="fileRow">
                    <form id="huiZhiFileForm" class="fileCss">
                      <el-col
                        class="el-icon-picture-outline picCss"
                        @click="handle()"
                      ></el-col>
                      <input
                        type="file"
                        id="alert_file"
                        name="file"
                        @change="picAdd()"
                        accept="image/png, image/jpeg, image/gif, image/jpg"
                      />
                    </form>
                    <ul
                      id="alert_fileBox"
                      v-for="(item, index) of upLoadFile"
                      :key="index"
                    >
                      <li>
                        <!-- <img :src="item.url"/> -->
                        <el-image
                          style="width: 70px; height: 70px"
                          :src="item.url"
                          :preview-src-list="srcList"
                          @click="enlargeImg(index)"
                        ></el-image>
                        <i
                          class="icon iconfont iconjian del"
                          @click="delFile(index)"
                        ></i>
                      </li>
                    </ul>
                  </el-row>
                  <el-row
                    >请上传处理凭证，要求图片清晰，如缴存回执单等，最多上传3张。</el-row
                  >
                  <el-row style="margin: 15px 0"
                    ><el-button
                      class="saveBtn"
                      type="primary"
                      :disabled="disabled"
                      @click="punishAdd()"
                      >提交</el-button
                    ></el-row
                  >
                </div>
              </el-col>
            </el-row>
          </el-row>
          <!--显示处理记录-->
          <el-row class="fontCss borderCss">预警处理记录</el-row>
          <template v-for="(item, index) in alertHandleDetail">
            <el-row class="borderCss" :key="index">
              <el-col :span="1" class="tipBar3 bgcTheme"></el-col>
              <el-col :span="23">
                <el-row class="titleCss verticalCss">{{
                  item.title || '--'
                }}</el-row>
                <el-row class="verticalCss">{{
                  item.viceTitle || '--'
                }}</el-row>
                <!--消除预警-->
                <el-row class="fontCss" v-if="item.status === '已处理'">
                  <el-col :span="24">{{ item.handleReason || '--' }}</el-col>
                </el-row>
                <!--处罚记录-->
                <el-row
                  class="fontCss"
                  v-if="item.status === '处理中' && item.receipt == null"
                >
                  <el-row class="verticalCss2">
                    <span class="labelCss">处罚对象：</span>
                    <span class="inforCss">{{
                      item.punishTarget || '--'
                    }}</span>
                  </el-row>
                  <el-row class="verticalCss2">
                    <span class="labelCss">处罚方式：</span>
                    <span class="inforCss">{{ item.type || '--' }}</span>
                  </el-row>
                  <el-row class="verticalCss2">
                    <span class="labelCss">处罚原因：</span>
                    <span class="inforCss">{{
                      item.punishReason || '--'
                    }}</span>
                  </el-row>
                </el-row>
                <!--处理回执-->
                <el-row
                  class="fontCss"
                  v-if="item.status === '处理中' && item.receipt != null"
                >
                  <el-row class="verticalCss2">
                    <span class="labelCss">预警状态：</span>
                    <span class="inforCss">{{ item.status || '--' }}</span>
                  </el-row>
                  <el-row class="verticalCss2">
                    <span class="labelCss">处理回执：</span>
                    <span class="inforCss">{{ item.receipt || '--' }}</span>
                  </el-row>
                  <el-row class="verticalCss2">
                    <span class="labelCss">附件：</span>
                    <div class="inforCss" v-if="item.fileExpandVOs">
                      <template v-for="(files, index) in item.fileExpandVOs">
                        <el-image
                          :key="index"
                          class="imgCss"
                          :src="files.absolutePath"
                          :preview-src-list="[files.absolutePath]"
                        ></el-image>
                      </template>
                    </div>
                  </el-row>
                </el-row>
                <!--产生预警记录-->
                <el-row class="fontCss" v-if="item.status === '未处理'">
                  <el-row class="fontCss">
                    <el-row class="verticalCss2">
                      <el-col>
                        <span class="labelCss">预警类型：</span>
                        <span class="inforCss">{{
                          alertDetail.description || '--'
                        }}</span>
                      </el-col>
                    </el-row>
                    <el-row class="verticalCss2">
                      <span class="labelCss">预警原因：</span>
                      <span class="inforCss">{{
                        alertDetail.reason || '--'
                      }}</span>
                    </el-row>
                  </el-row>
                </el-row>
              </el-col>
            </el-row>
          </template>
        </el-col>
        <!--右-->
        <el-col :span="9">
          <el-row class="intervalCss2 rightBorder">
            <el-row class="right-title fontCss">
              <el-col :span="6">预警详情</el-col>
              <el-col :span="7" :offset="11" style="text-align: right">{{
                alertDetail.alertCreateTime != null
                  ? alertDetail.alertCreateTime.substr(0, 10)
                  : '--'
              }}</el-col>
            </el-row>
            <el-row style="width: 100%; height: 10px"></el-row>
            <el-row class="verticalCss2">
              <!-- <el-col :span="16">{{alertDetail.companyName || "--"}}</el-col>
              <el-col :span="8" class="alertTypeCss">{{alertDetail.description || "--"}}</el-col> -->
              <el-col :span="24"
                >{{ alertDetail.companyName || '--' }}
                <span class="alertTypeCss">{{
                  alertDetail.description || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">预警原因：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.reason || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">处理办法：</span>
                <span
                  class="inforCss"
                  style="font-size: 14px; color: #2791e8"
                  >{{ alertDetail.handleType || '--' }}</span
                >
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss fl">预警天数：</span>
                <span class="inforCss2">{{
                  alertDetail.alertDayCount || '--'
                }}</span>
                <span class="inforCss" style="display: inline-block">天</span>
              </el-col>
            </el-row>
          </el-row>
          <el-row class="intervalCss2 rightBorder">
            <el-row class="right-title fontCss">
              <el-col :span="10">企业信息</el-col>
            </el-row>
            <el-row style="width: 100%; height: 10px"></el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">企业名称：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.companyName || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">注册地址：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.regAreaName || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">详细地址：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.officeAddress || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">法人姓名：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.boss || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">联系方式：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.bossTel || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">座机号码：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.landlineTel || '--'
                }}</span>
              </el-col>
            </el-row>
            <el-row class="verticalCss2">
              <el-col>
                <span class="labelCss fontCss">联系邮箱：</span>
                <span class="inforCss rightContent-size">{{
                  alertDetail.email || '--'
                }}</span>
              </el-col>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="btnContainer"
        ><el-button class="commonBut" @click="goBack">返回</el-button></el-row
      >
    </el-row>

    <el-dialog
      title="新增处罚"
      :visible.sync="addAlertAble"
      @close="closeDialog('addBox')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <el-form :model="addForm" :rules="ruleAdd" ref="addBox">
        <el-form-item label="处罚对象：" :label-width="formLabelWidth">
          <span>{{ alertDetail.companyName }}</span>
        </el-form-item>
        <el-form-item
          label="处罚方式："
          :label-width="formLabelWidth"
          prop="type"
        >
          <el-select
            v-model="addForm.type"
            clearable
            filterable
            placeholder="请选择"
            class="dialogSingleInp"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="处罚原因："
          :label-width="formLabelWidth"
          prop="punishReason"
        >
          <!-- <textarea style="height:160px;width:100%" placeholder="请填写处罚原因，不超过100字。" v-model="addForm.punishReason"></textarea> -->
          <el-input
            type="textarea"
            placeholder="请填写处罚原因，不超过100字。"
            v-model="addForm.punishReason"
            maxlength="100"
            show-word-limit
            rows="3"
            class="dialogSingleInp"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('addBox')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveAlert"
          :disabled="disabled"
          class="save"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="消除预警"
      class="dialogSty"
      :visible.sync="eliminateAlertAble"
      @close="closeDialog('eliminateBox')"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      width="640px"
    >
      <p class="warningInfo">
        <i class="el-icon-warning warningIcon"></i>
        <span class="warningText"
          >请核实项目是否如实按照相关规定处理预警。消除后，该项目本次预警将不会再次生成。</span
        >
      </p>
      <el-form
        :model="eliForm"
        :rules="ruleEliminate"
        ref="eliminateBox"
        style="padding: 24px 24px 16px"
      >
        <el-form-item
          label="消除原因："
          :label-width="formLabelWidth"
          prop="handleReason"
          style="margin-bottom: 30px"
        >
          <el-input
            type="textarea"
            placeholder="请填写消除原因，不超过100字。"
            v-model="eliForm.handleReason"
            maxlength="100"
            show-word-limit
            rows="3"
            class="dialogSingleInp"
          >
          </el-input>
          <!-- <textarea style="height:160px;width:100%;margin-top: 10px;resize:none;padding:10px;" placeholder="请填写消除原因，不超过100字。" v-model="eliForm.handleReason" maxlength="100"></textarea> -->
        </el-form-item>
        <!-- <el-row style="margin: -10px 0 15px 40px;">请核实项目是否如实按照相关规定处理预警。消除后，该项目本次预警将不会再次生成。</el-row> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click.native="cancel('eliminateBox')" class="cancel"
          >取消</el-button
        >
        <el-button
          type="primary"
          @click.native="saveEli"
          :disabled="disabled"
          class="save"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
//
import common from '../../kits/common'

export default {
  name: 'alertDetail',
  components: {
    common,
  },
  inject: ['reload'],
  data() {
    //验证处罚原因
    var validatePRS = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('处罚原因不能为空'))
      } else {
        if (value.length > 100) {
          callback(new Error('处罚原因不能超过100字'))
        } else {
          callback()
        }
      }
    }
    //验证消除原因
    var validateType = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('消除原因不能为空'))
      } else {
        if (value.length > 100) {
          callback(new Error('消除原因不能超过100字'))
        } else {
          callback()
        }
      }
    }
    return {
      alertDetail: [],
      alertHandleDetail: [],
      typeOptions: [],
      receipt: '',
      /*附件上传*/
      /*dialogImageUrl: '',
        dialogVisible: false,
        fileCount:0,//决定是否能继续上传
        fileObject:[],*/
      upLoadFile: [],
      oldSrcList: [],
      srcList: [], //处理预警上传照片
      uploadUrl: 'api-f/files/upload',
      /*---------*/
      addAlertAble: false, //新增处罚弹框
      eliminateAlertAble: false, //消除预警弹框
      disabled: false,
      formLabelWidth: '120px',
      ruleAdd: {
        type: [
          {
            required: true,
            message: '请选择处罚方式',
            trigger: 'blur',
          },
        ],
        punishReason: [
          {
            required: true,
            validator: validatePRS,
            trigger: 'blur',
          },
        ],
      },
      addForm: {
        punishReason: '',
        type: '',
      },
      ruleEliminate: {
        handleReason: [
          {
            required: true,
            validator: validateType,
            trigger: 'blur',
          },
          {},
        ],
      },
      eliForm: {
        handleReason: '',
      },
      back: true,
    }
  },

  //ops:,
  created() {
    //从其它页面过来默认选中
    this.$store.commit('set_active_index', '/home/project/alertProjectList')
    this.$store.state.activeMenu = '/home/project/alertProjectList'
    this.$store.commit('CHANGE_SLIDER_NAME', {
      oldUrl: '/home/project/alertProjectList',
      newUrl: this.$router.currentRoute.fullPath,
    })
    var data = {
      alertId: this.$route.query.alertId,
    }
    this.getAlertHandleDetail(
      'api-a/nc/alerthandle/expand/alerthandlelist',
      data
    ) //预警处理记录
    this.getAlertDetail('api-a/nc/alert/expand/findalertdetail', data) //预警详情
    this.getType('api-bs/base/dicitem/findbytype', { type: 'ALERT_PUNISH_WAY' }) //处罚方式下拉框
  },
  methods: {
    goBack() {
      this.$router.push('/home/project/alertProjectList')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/project/alertProjectList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getAlertDetail(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.alertDetail = resp.data.result
        })
        .catch((resp) => {})
    },
    getAlertHandleDetail(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.alertHandleDetail = resp.data.result
          //this.alertHandleDetail = resp.data.result;
          // console.log(":ops:"+resp.data.result);
          // var data = resp.data.result;
        })
        .catch((resp) => {})
    },
    getType(urls, datas) {
      this.axios({
        method: 'post',
        url: urls,
        data: datas,
      })
        .then((resp) => {
          this.typeOptions = resp.data.result
        })
        .catch((resp) => {})
    },
    uploadFileByAjaxSubmit(url) {
      var that = this
      var options = {
        url: common.uploadUrl + url,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          that.upLoadFile.push(data)
          that.srcList.push(data.url)
          that.oldSrcList.push(data.url)
          //
          $('#alert_file').val('')
        },
        error: function (data) {
          that.$message.error('照片上传失败!')
        },
      }

      $('#huiZhiFileForm').ajaxSubmit(options)

      return false
    },
    enlargeImg(index) {
      this.srcList = this.oldSrcList
      var demo = this.srcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.srcList = list
    },
    picAdd() {
      // uploadUrl 为上传路径
      var Filedata
      var file
      var fileSize
      Filedata = $('#alert_file').val()
      if (!Filedata) {
        return
      }
      try {
        file = $('#alert_file')[0].files[0]
        fileSize = (file.size / 1024).toFixed(0)
      } catch (e) {
        this.$message({
          message:
            '您的浏览器暂不支持计算上传文件的大小，确保上传文件不要超过5M，建议使用FireFox、Chrome或IE10以上浏览器。',
          type: 'warning',
        })
      }

      if (!/\.(jpeg|jpg|png|gif|PNG|JPG|JPEG|GIF)$/.test(Filedata)) {
        this.$message({
          message: '仅支持上传jpeg、jpg、png、gif格式文件',
          type: 'warning',
        })
        return
      }

      if (this.upLoadFile.length == 3) {
        this.$message({
          message: '最多上传3个附件',
          type: 'warning',
        })
        $('#alert_file').val('')
        return
      }

      //文件大小
      if (fileSize / 1 > 1024 * 5) {
        this.$message({
          message: '最多能上传5M以内的附件',
          type: 'warning',
        })
        return
      }
      this.uploadFileByAjaxSubmit(this.uploadUrl)
    },
    delFile(index) {
      this.upLoadFile.splice(index, 1)
      this.srcList.splice(index, 1)
      this.oldSrcList.splice(index, 1)
    },
    punishAdd() {
      var data = {
        receipt: this.receipt,
        alertId: this.$route.query.alertId,
        fileList: JSON.stringify(this.upLoadFile),
      }
      if (!this.receipt) {
        this.$message({
          message: '请填写处理回执！',
          type: 'warning',
        })
        return
      }
      if (this.receipt.length > 100) {
        this.$message({
          message: '回执内容不得超过100字！',
          type: 'warning',
        })
        return
      }
      this.disabled = true
      this.axios({
        method: 'post',
        url: 'api-a/nc/alerthandle/expand/addhandlealert',
        data: data,
      })
        .then((resp) => {
          var reData = resp.data
          // console.log(reData);
          if (reData.hasError) {
            //alert("保存失败!");
            this.$message({
              message: '保存失败!',
              type: 'warning',
            })
          } else {
            this.$route.query.doEvent = '处理中'
            this.reload()
            //alert("\"保存成功!\"");
            this.$message({
              message: '保存成功!',
              type: 'success',
            })
          }
        })
        .catch((resp) => {})
    },
    // 点击添加处罚按钮
    goAddAlertAble() {
      this.addAlertAble = true
    },
    //添加消除预警
    goEliminateAlertAble() {
      this.eliminateAlertAble = true
    },
    //关闭弹窗
    closeDialog(ele) {
      this.$refs[ele].resetFields()
    },
    // 弹框的取消功能
    cancel(ele) {
      this.$refs[ele].resetFields()
      if (ele == 'addBox') {
        //取消保存修改名称
        this.addAlertAble = false
      } else if (ele == 'eliminateBox') {
        //取消添加下级部门
        this.eliminateAlertAble = false
      }
    },
    //添加处罚
    saveAlert() {
      this.$refs['addBox'].validate((valid) => {
        if (valid) {
          this.disabled = true
          this.axios({
            method: 'post',
            url: 'api-a/nc/alerthandle/expand/punish',
            data: {
              alertId: this.$route.query.alertId,
              type: this.addForm.type,
              punishReason: this.addForm.punishReason,
            },
          })
            .then(
              (response) => {
                if (!response.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '添加成功',
                  })
                  //alert("添加成功！");
                  this.addAlertAble = false
                  this.$route.query.doEvent = '处理中'
                  this.reload()
                } else {
                  this.$message({
                    type: 'success',
                    message: response.data.errorMsg,
                  })
                  //alert("添加失败！");
                }
              },
              (response) => {
                this.disabled = false
              }
            )
            .catch((error) => {
              this.disabled = false
            })
        } else {
          return false
        }
      })
    },
    //消除预警
    saveEli() {
      this.$refs['eliminateBox'].validate((valid) => {
        if (valid) {
          this.disabled = true
          this.axios({
            method: 'post',
            url: 'api-a/nc/alerthandle/expand/handle',
            data: {
              alertId: this.$route.query.alertId,
              handleReason: this.eliForm.handleReason,
            },
          })
            .then(
              (response) => {
                if (!response.data.hasError) {
                  this.$message({
                    type: 'success',
                    message: '消除成功',
                  })
                  //alert("预警已消除！");
                  this.eliminateAlertAble = false
                  this.$route.query.doEvent = '已处理'
                  this.reload()
                } else {
                  this.$message({
                    type: 'success',
                    message: response.data.errorMsg,
                  })
                  //alert("消除失败！");
                }
              },
              (response) => {}
            )
            .catch((error) => {})
        } else {
          return false
        }
      })
    },
    /*formatTimeToStr(times, pattern) {
        var d = new Date(times).Format("yyyy-MM-dd hh:mm:ss");
        if (pattern) {
          d = new Date(times).Format(pattern);
        }
        return d.toLocaleString();
      }*/
  },
}
/*Date.prototype.Format = function (fmt) {
    var o = {
      "M+": this.getMonth() + 1,                 //月份
      "d+": this.getDate(),                    //日
      "h+": this.getHours(),                   //小时
      "m+": this.getMinutes(),                 //分
      "s+": this.getSeconds(),                 //秒
      "q+": Math.floor((this.getMonth() + 3) / 3), //季度
      "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(fmt))
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
  }*/
</script>

<style scoped lang="less">
.mainCon {
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 0;
  // top: 173px;
}
.container {
  top: 222px;
  padding-bottom: 50px;
}
.el-col {
  border-radius: 4px;
}
.intrCss {
  margin-top: 15px;
}
.tipBar {
  height: 67px;
  background-color: #e4ebf1;
  font: bold 18px/67px Microsoft YaHei;
}
.tipBar2 {
  height: 88px;
  margin: 35px 20px;
}
.tipBar3 {
  width: 8px;
  height: 8px;
  background-color: #009588;
  margin: 20px 10px 0 0;
}
.tipBar4 {
  color: #d0d0d8;
  height: 88px;
  line-height: 88px;
}
.lineCss {
  width: 100%;
  height: 8px;
  margin-top: 40px;
}
.picCss {
  height: 80px;
  width: 80px;
  font-size: 88px;
  color: #d0d0d8;
}
.picCss2 {
  color: #e02020;
}
.picCss3 {
  color: #67ace4;
}
.picCss4 {
  color: #009689;
}
.fontCss {
  font-size: 14px;
  color: #666;
}
.fontCss2 {
  font-size: 18px;
}
.tip {
  line-height: 67px;
  padding-left: 20px;
  font-weight: bold;
}
.tip2 {
  height: 120px;
  width: 1000px;
  background-color: #f5f7fa;
  margin-bottom: 15px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
} //   .intervalCss{margin:0 20px}
.intervalCss2 {
  margin: 0 10px 40px;
}
.processState {
  height: 80px;
  margin-top: 40px;
}
.borderCss {
  padding: 15px 0;
  border-bottom: 2px solid #dee5f4;
}
.titleCss {
  font-size: 20px;
  font-weight: bold;
}
.verticalCss {
  margin: 10px 0;
}
.verticalCss2 {
  padding: 6px 0;
}
.imgCss {
  width: 70px;
  height: 56px;
  margin: 0 5px;
}
.rightBorder {
  border: 1px solid #dee5f4;
  padding: 20px 15px;
}
.right-title {
  padding: 8px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #dee5f4;
}
.alertTypeCss {
  background-color: #fff1f0;
  text-align: center;
  font-size: 12px;
  padding: 4px 0;
  color: #e74c4c;
  padding: 0 8px;
}
.rightContent-size {
  font-size: 14px;
}
.btnCss {
  text-align: right;
  padding-right: 8px;
  margin-top: 25px;
}
.btnContainer {
  text-align: center;
  margin: 20px 0;
}
.hint {
  float: left;
  display: block;
  width: 27%;
}
.stepCss {
  float: left;
  display: block;
  width: 9.5%;
}
.imgLabel {
  display: inline-block;
  width: 80px;
  float: left;
}
.hintCss {
  display: block;
  margin-left: 80px;
  margin-top: 15px;
  margin-bottom: 10px;
}
.labelCss {
  display: inline-block;
  width: 78px;
}
.labelCss2 {
  display: inline-block;
  width: 85px;
}
.inforCss {
  display: block;
}
.inforCss2 {
  display: inline-block;
  // float: left;
  // padding:0 5px;
  padding-right: 5px;
  // margin-left: 20px;
  color: #e02020;
  font-weight: bold;
  /*font-size:32px;*/
}
.inforCss3 {
  display: block;
  /*margin-top: 14px;*/
}
.tipButton {
  position: absolute;
  z-index: 10;
  right: 24px;
  top: 10px;
}
.fileRow {
  height: 88px;
  width: 100%;
}
#alert_fileBox {
  margin-left: 80px;
}
#alert_fileBox li {
  position: relative;
  float: left;
  margin-left: 30px;
  margin-top: 10px;
}
#alert_fileBox li .del {
  position: absolute;
  right: -6px;
  top: -8px;
  color: #e81b23;
}

#alert_fileBox li img {
  width: 70px;
  height: 70px;
}
/*上传附件 */
.fileCss {
  position: absolute;
  top: 0;
  left: 0;
  /deep/ #alert_file {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 88px;
    height: 88px;
    cursor: pointer;
  }
}
.intervalCss.el-col.el-col-15 {
  padding-right: 100px;
}

.warningInfo {
  background: #fffbe6;
  height: 36px;
  padding-left: 48px;
  position: relative;
  .warningIcon {
    color: orange;
    font-size: 20px;
    position: absolute;
    top: 8px;
    left: 20px;
  }
  .warningText {
    font-family: 'SourceHanSansCN-Regular';
    font-size: 14px;
    color: #ff4d4a;
    line-height: 36px;
  }
}
.dialogSty /deep/ .el-dialog__body {
  padding: 0 !important;
}
</style>
